import * as PIXI from 'pixi.js';
// 默认导出记分板构造函数
export default class Scoreboard {
    public container: PIXI.Container;
    // 用户是否缺钱
    public outOfMoney = false;
    private winAmountText: PIXI.Text;
    private moneyText: PIXI.Text;
    // 用户获利金额
    private winAmount: number = 0;
    // 当前用户分数
    private money: number = 100;
    // 游戏赌注
    private bet: number = 5;

    constructor(app: PIXI.Application) {
        // 创建记分板容器
        this.container = new PIXI.Container();
        // 调用生成记分板对象的方法
        this.generate(app.screen.width, app.screen.height);
    }

    // 减分方法
    decrement() {
        // 如果用户当前不是缺钱状态
        if (!this.outOfMoney) {
            // 将总分数减去赌注
            this.money -= this.bet;
            // 更新'总分数'文本精灵的文本
            this.moneyText.text = `money: ${this.money}`;
        }
        // 如果总分数减去赌注后小于0
        if (this.money - this.bet < 0) {
            // 更新用户的缺钱状态为真
            this.outOfMoney = true;
        }
    }

    // 加分方法
    increment() {
        // 更新当前用户分数
        this.money += this.bet * 2;
        // 更新'总分数'文本精灵的文本
        this.moneyText.text = `money: ${this.money}`;
        // 更新用户获利金额
        this.winAmount += this.bet;
         // 更新'获利金额'文本精灵的文本
        this.winAmountText.text = `win: ${this.winAmount}`;
        // 更新用户的缺钱状态
        if (this.outOfMoney) this.outOfMoney = false;
    }

    // 调用生成记分板对象的方法
    private generate(appWidth: number, appHeight: number) {
        // 创建文本样式
        const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 24,
            fill: 'yellow',
        });
        // 创建'总分数'的文本精灵
        this.moneyText = new PIXI.Text(`money: ${this.money}`, style);
        // 设置'总分数'文本精灵的纵坐标
        this.moneyText.y = 5;

        // 创建'赌注'的文本精灵
        const betText = new PIXI.Text(`bet: ${this.bet}`, style);
        // 设置'赌注'文本精灵的纵坐标('总分数'文本精灵的纵坐标 + 10)
        betText.y = this.moneyText.height + 10;

        // 创建'获利金额'的文本精灵
        this.winAmountText = new PIXI.Text(`win: ${this.winAmount}`, style);
        // 设置'获利金额'文本精灵的纵坐标('赌注'文本精灵的纵坐标 + '赌注'文本精灵的高度 + 5)
        this.winAmountText.y = betText.y + betText.height + 5;

        // 设置'赌注'、'总分数'、'获利金额'三个文本精灵的横坐标
        betText.x = this.moneyText.x = this.winAmountText.x = 10;

        // 创建一个图形类容器
        const rect = new PIXI.Graphics();
        // 填充图形类容器的颜色
        rect.beginFill(0x02474E, 0.8);
        // 图形类容器的高度( '总分数'文本精灵的高度 + '赌注'文本精灵的高度 + '获利金额'文本精灵的高度)
        const rectHeight = this.moneyText.height + betText.height + this.winAmountText.height + 25;
        // 设置图形类容器的类型为矩形(x、y、宽度、高度)
        rect.drawRect(0, 0, 160, rectHeight);
        // 结束绘制
        rect.endFill();

        // 设置记分板容器的横坐标(舞台宽度 - 矩形宽度 - 7)
        this.container.x = appWidth - rect.width - 7;
        // 设置记分板容器的纵坐标(舞台高度 / 2 + 70)
        this.container.y = appHeight / 2 + 70;
        // 将矩形、'总分数'文本精灵、'赌注'文本精灵、'获利金额'文本精灵添加到记分板容器中
        this.container.addChild(rect, this.moneyText, betText, this.winAmountText);
    }
}
